<template>
  <div class="modal-demo">
    <div class="example-section">
      <h3 class="section-title">基础弹窗</h3>
      <p class="section-description">各种类型的弹窗组件</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-space wrap>
            <a-button type="primary" @click="showBasicModal">基础弹窗</a-button>
            <a-button @click="showConfirmModal">确认弹窗</a-button>
            <a-button @click="showInfoModal">信息弹窗</a-button>
            <a-button @click="showSuccessModal">成功弹窗</a-button>
            <a-button @click="showWarningModal">警告弹窗</a-button>
            <a-button @click="showErrorModal">错误弹窗</a-button>
          </a-space>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">自定义弹窗</h3>
      <p class="section-description">自定义内容和样式的弹窗</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-space wrap>
            <a-button type="primary" @click="showCustomModal">自定义弹窗</a-button>
            <a-button @click="showFormModal">表单弹窗</a-button>
            <a-button @click="showFullscreenModal">全屏弹窗</a-button>
            <a-button @click="showCenteredModal">居中弹窗</a-button>
          </a-space>
        </div>
      </div>
    </div>

    <div class="example-section">
      <h3 class="section-title">加载状态</h3>
      <p class="section-description">带加载状态的弹窗和操作</p>

      <div class="demo-container">
        <div class="demo-wrapper">
          <a-space wrap>
            <a-button type="primary" @click="showLoadingModal" :loading="loadingStates.modal">
              加载弹窗
            </a-button>
            <a-button @click="showProgressModal">进度弹窗</a-button>
            <a-button @click="handleAsyncAction" :loading="loadingStates.async">
              异步操作
            </a-button>
          </a-space>
        </div>
        <div class="result-display">
          <div class="result-label">加载状态：</div>
          <div class="result-value">
            <pre>{{ JSON.stringify(loadingStates, null, 2) }}</pre>
          </div>
        </div>
      </div>
    </div>

    <!-- 基础弹窗 -->
    <a-modal
      v-model:open="modals.basic"
      title="基础弹窗"
      @ok="handleBasicOk"
    >
      <p>这是一个基础的弹窗示例。</p>
      <p>您可以在这里放置任何内容。</p>
    </a-modal>

    <!-- 自定义弹窗 -->
    <a-modal
      v-model:open="modals.custom"
      title="自定义弹窗"
      width="800px"
      :footer="null"
    >
      <div class="custom-modal-content">
        <div class="modal-header">
          <h4>用户信息</h4>
          <p>请查看以下用户详细信息</p>
        </div>
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="用户名">张三</a-descriptions-item>
          <a-descriptions-item label="邮箱">zhangsan@example.com</a-descriptions-item>
          <a-descriptions-item label="手机号">138****8888</a-descriptions-item>
          <a-descriptions-item label="部门">技术部</a-descriptions-item>
          <a-descriptions-item label="职位">前端工程师</a-descriptions-item>
          <a-descriptions-item label="入职时间">2023-01-15</a-descriptions-item>
        </a-descriptions>
        <div class="modal-actions">
          <a-space>
            <a-button @click="modals.custom = false">取消</a-button>
            <a-button type="primary" @click="modals.custom = false">确定</a-button>
          </a-space>
        </div>
      </div>
    </a-modal>

    <!-- 表单弹窗 -->
    <a-modal
      v-model:open="modals.form"
      title="编辑用户"
      @ok="handleFormSubmit"
      :confirm-loading="loadingStates.form"
    >
      <a-form ref="formRef" :model="formData" layout="vertical">
        <a-form-item label="用户名" name="username">
          <a-input v-model:value="formData.username" placeholder="请输入用户名" />
        </a-form-item>
        <a-form-item label="邮箱" name="email">
          <a-input v-model:value="formData.email" placeholder="请输入邮箱" />
        </a-form-item>
        <a-form-item label="部门" name="department">
          <a-select v-model:value="formData.department" placeholder="请选择部门">
            <a-select-option value="tech">技术部</a-select-option>
            <a-select-option value="product">产品部</a-select-option>
            <a-select-option value="design">设计部</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 全屏弹窗 -->
    <a-modal
      v-model:open="modals.fullscreen"
      title="全屏弹窗"
      width="100%"
      :style="{ top: 0 }"
      :body-style="{ height: 'calc(100vh - 110px)', overflow: 'auto' }"
    >
      <div class="fullscreen-content">
        <h4>全屏内容展示</h4>
        <p>这是一个全屏弹窗，适合展示大量内容或复杂的界面。</p>
        <a-row :gutter="24">
          <a-col :span="12">
            <a-card title="左侧内容">
              <p>这里可以放置图表、表格或其他复杂组件。</p>
              <div class="demo-chart">
                <div class="chart-placeholder">图表占位区域</div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="12">
            <a-card title="右侧内容">
              <p>这里可以放置表单、列表或其他内容。</p>
              <a-list
                :data-source="listData"
                item-layout="horizontal"
              >
                <template #renderItem="{ item }">
                  <a-list-item>
                    <a-list-item-meta
                      :title="item.title"
                      :description="item.description"
                    />
                  </a-list-item>
                </template>
              </a-list>
            </a-card>
          </a-col>
        </a-row>
      </div>
    </a-modal>

    <!-- 进度弹窗 -->
    <a-modal
      v-model:open="modals.progress"
      title="上传进度"
      :footer="null"
      :closable="false"
      :mask-closable="false"
    >
      <div class="progress-content">
        <div class="progress-info">
          <span>正在上传文件...</span>
          <span>{{ progressPercent }}%</span>
        </div>
        <a-progress :percent="progressPercent" :show-info="false" />
        <div class="progress-actions">
          <a-button @click="cancelProgress" :disabled="progressPercent === 100">
            取消上传
          </a-button>
        </div>
      </div>
    </a-modal>

    <div class="example-section">
      <h3 class="section-title">组件代码示例</h3>
      <p class="section-description">弹窗组件的使用方法</p>

      <a-collapse>
        <a-collapse-panel key="1" header="基础弹窗">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;a-button type="primary" @click="showModal"&gt;打开弹窗&lt;/a-button&gt;

  &lt;a-modal
    v-model:open="visible"
    title="基础弹窗"
    @ok="handleOk"
    @cancel="handleCancel"
  &gt;
    &lt;p&gt;弹窗内容&lt;/p&gt;
  &lt;/a-modal&gt;
&lt;/template&gt;

&lt;script setup&gt;
import { ref } from 'vue'

const visible = ref(false)

const showModal = () =&gt; {
  visible.value = true
}

const handleOk = () =&gt; {
  visible.value = false
}

const handleCancel = () =&gt; {
  visible.value = false
}
&lt;/script&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="2" header="确认弹窗">
          <pre class="code-block"><code>&lt;script setup&gt;
import { Modal } from 'ant-design-vue'

const showConfirm = () =&gt; {
  Modal.confirm({
    title: '确认删除',
    content: '确定要删除这条记录吗？',
    onOk() {
      console.log('确认删除')
    },
    onCancel() {
      console.log('取消删除')
    }
  })
}
&lt;/script&gt;</code></pre>
        </a-collapse-panel>

        <a-collapse-panel key="3" header="表单弹窗">
          <pre class="code-block"><code>&lt;template&gt;
  &lt;a-modal
    v-model:open="visible"
    title="编辑表单"
    @ok="handleSubmit"
    :confirm-loading="loading"
  &gt;
    &lt;a-form ref="formRef" :model="form" layout="vertical"&gt;
      &lt;a-form-item label="名称" name="name"&gt;
        &lt;a-input v-model:value="form.name" /&gt;
      &lt;/a-form-item&gt;
    &lt;/a-form&gt;
  &lt;/a-modal&gt;
&lt;/template&gt;

&lt;script setup&gt;
const handleSubmit = async () =&gt; {
  loading.value = true
  try {
    // 提交表单
    await submitForm(form)
    visible.value = false
  } finally {
    loading.value = false
  }
}
&lt;/script&gt;</code></pre>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { Modal, message } from 'ant-design-vue'

// 弹窗状态
const modals = reactive({
  basic: false,
  custom: false,
  form: false,
  fullscreen: false,
  progress: false
})

// 加载状态
const loadingStates = reactive({
  modal: false,
  form: false,
  async: false
})

// 表单数据
const formData = reactive({
  username: '',
  email: '',
  department: ''
})

// 进度
const progressPercent = ref(0)

// 列表数据
const listData = [
  { title: '项目A', description: '这是项目A的描述信息' },
  { title: '项目B', description: '这是项目B的描述信息' },
  { title: '项目C', description: '这是项目C的描述信息' }
]

// 基础弹窗
const showBasicModal = () => {
  modals.basic = true
}

const handleBasicOk = () => {
  message.success('操作成功！')
  modals.basic = false
}

// 确认弹窗
const showConfirmModal = () => {
  Modal.confirm({
    title: '确认操作',
    content: '确定要执行这个操作吗？',
    onOk() {
      message.success('操作已确认')
    },
    onCancel() {
      message.info('操作已取消')
    }
  })
}

// 信息弹窗
const showInfoModal = () => {
  Modal.info({
    title: '信息提示',
    content: '这是一条信息提示。'
  })
}

// 成功弹窗
const showSuccessModal = () => {
  Modal.success({
    title: '操作成功',
    content: '您的操作已成功完成。'
  })
}

// 警告弹窗
const showWarningModal = () => {
  Modal.warning({
    title: '警告提示',
    content: '请注意这个操作可能有风险。'
  })
}

// 错误弹窗
const showErrorModal = () => {
  Modal.error({
    title: '操作失败',
    content: '操作执行失败，请重试。'
  })
}

// 自定义弹窗
const showCustomModal = () => {
  modals.custom = true
}

// 表单弹窗
const showFormModal = () => {
  formData.username = '张三'
  formData.email = 'zhangsan@example.com'
  formData.department = 'tech'
  modals.form = true
}

const handleFormSubmit = () => {
  loadingStates.form = true
  setTimeout(() => {
    message.success('表单提交成功！')
    modals.form = false
    loadingStates.form = false
  }, 2000)
}

// 全屏弹窗
const showFullscreenModal = () => {
  modals.fullscreen = true
}

// 居中弹窗
const showCenteredModal = () => {
  Modal.info({
    title: '居中弹窗',
    content: '这是一个居中显示的弹窗。',
    centered: true
  })
}

// 加载弹窗
const showLoadingModal = () => {
  loadingStates.modal = true
  setTimeout(() => {
    loadingStates.modal = false
    message.success('加载完成！')
  }, 3000)
}

// 进度弹窗
const showProgressModal = () => {
  modals.progress = true
  progressPercent.value = 0

  const timer = setInterval(() => {
    progressPercent.value += 10
    if (progressPercent.value >= 100) {
      clearInterval(timer)
      setTimeout(() => {
        modals.progress = false
        message.success('上传完成！')
      }, 1000)
    }
  }, 500)
}

const cancelProgress = () => {
  modals.progress = false
  progressPercent.value = 0
  message.info('上传已取消')
}

// 异步操作
const handleAsyncAction = () => {
  loadingStates.async = true
  setTimeout(() => {
    loadingStates.async = false
    message.success('异步操作完成！')
  }, 2000)
}
</script>

<style scoped>
.modal-demo {
  max-width: 1200px;
  margin: 0 auto;
}

.example-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
}

.example-section:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 20px;
  font-weight: 600;
  color: #262626;
  margin: 0 0 8px 0;
}

.section-description {
  font-size: 14px;
  color: #8c8c8c;
  margin: 0 0 24px 0;
  line-height: 1.6;
}

.demo-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.demo-wrapper {
  padding: 24px;
  background: #fafafa;
  border: 1px dashed #d9d9d9;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.demo-wrapper:hover {
  border-color: #1890ff;
  background: #f0f8ff;
}

.result-display {
  padding: 16px;
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.result-label {
  font-size: 14px;
  font-weight: 500;
  color: #262626;
  min-width: 80px;
}

.result-value {
  flex: 1;
  font-size: 12px;
  color: #595959;
}

.result-value pre {
  margin: 0;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  background: none;
  border: none;
  padding: 0;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 自定义弹窗样式 */
.custom-modal-content {
  padding: 8px 0;
}

.modal-header {
  margin-bottom: 24px;
}

.modal-header h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #262626;
}

.modal-header p {
  margin: 0;
  font-size: 14px;
  color: #8c8c8c;
}

.modal-actions {
  margin-top: 24px;
  text-align: right;
}

/* 全屏弹窗样式 */
.fullscreen-content {
  padding: 16px 0;
}

.fullscreen-content h4 {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #262626;
}

.demo-chart {
  margin-top: 16px;
}

.chart-placeholder {
  height: 200px;
  background: #f5f5f5;
  border: 2px dashed #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8c8c8c;
  font-size: 14px;
}

/* 进度弹窗样式 */
.progress-content {
  padding: 16px 0;
}

.progress-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 14px;
  color: #262626;
}

.progress-actions {
  margin-top: 16px;
  text-align: center;
}

/* 代码示例 */
.code-block {
  background: #f6f8fa;
  border: 1px solid #e1e4e8;
  border-radius: 6px;
  padding: 16px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.45;
  overflow-x: auto;
  margin: 0;
}

.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: #24292e;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .example-section {
    padding: 20px;
    margin-bottom: 16px;
  }

  .section-title {
    font-size: 18px;
  }

  .demo-container {
    gap: 16px;
  }

  .demo-wrapper {
    padding: 20px;
  }

  .result-display {
    flex-direction: column;
    gap: 8px;
  }

  .result-label {
    min-width: auto;
  }
}
</style>